<template>
    <div>
        <el-button size="small" type="primary" @click="goback">返回无限赏列表</el-button>
        <el-button size="small" type="primary" @click="addGoods">添加赏品</el-button>
        <el-table v-loading="loading" ref="multipleTable" border :data="wuxianGoods" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="ID" prop="id">
                <template v-slot="scope">
                                {{ scope.row.detail.id }} </template>
                </el-table-column>
            <el-table-column label="赏品名称" prop="name">
                <template v-slot="scope">{{ scope.row.detail.name }}</template>
            </el-table-column>
            <el-table-column prop="good_title" label="赏品类型">
                <template v-slot="scope">
                    <el-button type="primary" size="mini" round>{{
                        scope.row.detail.game_type
                    }}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="显示价格" prop="name">
                <template v-slot="scope">
                    <el-button type="warning" size="mini" round>￥{{ format_money(scope.row.detail.price)}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="回收价格" prop="name">
                <template v-slot="scope">
                    <el-button type="warning" size="mini" round>￥{{ format_money(scope.row.detail.recovery_price)}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="赏品图片">
                <template v-slot="scope">
                    <div class="display_url">
                        <img :src="scope.row.detail.display_url" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot="scope">
                    <a class="editGood" @click="edit(scope.row)">编辑</a>
                    <a class="delGood" @click="del(scope.row.good_uuid)">删除</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { StatusCodes } from "http-status-codes";
import wuxian from "../../../../api/jurisdiction";
import {format_money} from "@/utils/format";
export default {
    data() {
        return {
            loading:true,
            wuxianGoods: [],
        };
    },
    mounted() {
        this.getWuxianGoods();
    },
    methods: {
      format_money,
        goback() {
            this.$router.push("/layout/choushangguanli/wuxianchi");
        },
        addGoods() {
            this.$router.push("/layout/choushangguanli/addwuxianchigoods")
        },
        getWuxianGoods() {
            wuxian
                .getWuxiangoods({ game_uuid: localStorage.getItem('wuxianshang_game_uuid') })
                .then((res) => {
                    this.wuxianGoods = res.data.data;
                    this.loading = false;
                })
                .catch((err) => {
                    if (err.data.code === -1) {
                        this.$message.warning("请重新获取赏品列表");
                    }
                });
        },
        handleSelectionChange() { },
        edit(id) {
           
        },
        //删除赏品
        del(id) {
            this.$confirm("请确认是否删除赏品", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    wuxian.delwuxiangood({ data: { uuid: id } }).then((res) => {
                    console.log('id',res)
                  })
                })
                .catch(() => {
                    this.$message({ type: "info", message: "已取消" });
                });
        },
    },
};
</script>

<style lang="less" scoped>
.display_url,
.display_url img {
    width: 60px;
}

.el-table {
    margin-top: 10px;
}

a {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 7px;
    height: 23px;
    border-radius: 23px;
    font-size: 12px;
    background: #009688;
    color: white;
    cursor: pointer;
}

.delGood {
    background: #ff5722;
}
</style>
